<template>
  <div>
    <div class="top">
      <div style="float: right;margin-right: 10px;">
        <el-input
          v-model="kwInput"
          size="mini"
          placeholder="输入 任意字符 进行筛选"
          class="input-with-select"
          clearable
          @keyup.native.enter="handleSearch"
        >
          <el-button slot="append" size="mini" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-input>
      </div>
      <div style="float: right;margin-right: 10px;" class="mobile-hidden">
        <el-select v-model="processed" size="mini" placeholder="状态" @change="handleSearch">
          <el-option label="不过滤" value="" />
          <el-option label="新询盘" value="useremail" />
          <el-option label="价值客户" value="credit_tousu" />
          <el-option label="普通客户" value="credit_jufu" />
        </el-select>
      </div>
      <div style="float: right;margin-right: 10px;" class="mobile-hidden">
        <el-select v-model="readed" size="mini" placeholder="已读取" class="head" filterable clearable @change="handleSearch">
          <el-option label="所有" value="" />
          <el-option label="未读" value="false" />
          <el-option label="已读" value="true" />
        </el-select>
      </div>
      <div style="float: right;margin-right: 10px;margin-top: 10px" class="mobile-hidden">
        <el-checkbox v-model="later" size="mini">稍后</el-checkbox>
      </div>
      <!-- 邮箱选择器 (仅管理员显示) -->
      <div v-if="isManager" style="float: right;margin-right: 10px;" class="mobile-hidden">
        <el-select
          v-model="selectedMailServerId"
          size="mini"
          placeholder="选择邮箱账号"
          :loading="mailServerLoading"
          style="width: 200px;"
          @change="onMailServerChange"
        >
          <el-option
            v-for="server in mailServerList"
            :key="server.id"
            :label="`${server.username} (${server.user_name})`"
            :value="server.id"
          >
            <span style="float: left">{{ server.username }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ server.user_name }}</span>
          </el-option>
        </el-select>
      </div>
      <div style="float: right;margin-right: 10px;">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="newMailDialogShow=true">写邮件</el-button>
      </div>
      <div style="float: right;margin-right: 10px;">
        <el-button type="success" size="mini" icon="el-icon-s-tools" @click="showAddMailServerDialog">添加邮箱账号</el-button>
      </div>
      <div style="float: right;margin-right: 10px;" class="mobile-hidden">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="notCustomerDialogVisible=true">黑名单</el-button>
      </div>
      <div style="clear: both" />
    </div>
    <el-alert center type="warning">询盘每天要处理!</el-alert>
    <el-table
      v-loading="listLoading"
      :data="data"
      :show-header="false"
      fit
      highlight-current-row
      style="width: 100%"
      @cell-mouse-enter="(m) => m.active=true"
      @cell-mouse-leave="(m) => m.active=false"
      @sort-change="handleSort"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="selection"
        width="100"
      >
        <template slot-scope="scope">
          <a v-if="scope.row.star" class="mt-btn edit" style="color: goldenrod" title="取消标星" @click="handleEditMail('star', false, scope.row)">
            <i class="el-icon-star-on mt-icon" />
          </a>
          <a v-else class="mt-btn edit" style="color: goldenrod" title="标注星标" @click="handleEditMail('star', true, scope.row)">
            <i class="el-icon-star-off mt-icon" />
          </a>
          <i v-if="scope.row.replied" class="el-icon-success" style="color: green" title="已经回复" />
          <a title="点击查看客户信息" @click="handleShowCustomerCard(scope.row.crmcustomer_id)"><i v-if="scope.row.crmcustomer_id" class="el-icon-s-custom" style="color: magenta" /></a>
        </template>
      </el-table-column>
      <el-table-column align="left" width="200" prop="short_from" label="from">
        <template slot-scope="scope">
          <span :class="{'unread': !scope.row.readed, 'readed': scope.row.readed}" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            {{ scope.row.short_from }}
          </span>

        </template>
      </el-table-column>
      <el-table-column align="left" label="简要" prop="subject">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center; justify-content: space-between" @mouseover="scope.row.active = true" @mouseleave="scope.row.active = false">
            <div style="display: flex; align-items: center; flex-grow: 1;">
              <div @click="handleDrawer(scope.row)">
                <span :class="{'unread': !scope.row.readed, 'readed': scope.row.readed}" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  {{ scope.row.subject }}|<span style="font-size: 12px; color: rgb(114, 121, 135)">{{ scope.row.short_content }}</span>
                </span>
              </div>
              <div style="margin-left: auto;">
                <el-tag v-if="scope.row.process_label.length" size="mini" effect="dark">
                  {{ scope.row.process_label }}
                </el-tag>
              </div>
            </div>
            <div v-show="scope.row.active" class="mt-row-btns" style="display: flex; align-items: center;">
              <a v-if="scope.row.readed" class="mt-btn edit" title="标记未读" @click="handleEditMail('readed', false, scope.row)">
                <i class="el-icon-document-remove mt-icon" />
              </a>
              <a class="mt-btn delete" title="删除" @click="handleEditMail('showAble', false, scope.row)">
                <i class="el-icon-delete mt-icon" /></a>
            </div>
          </div>
          <div style="display: block;">
            <div v-for="(item,index) in scope.row.attachments" :key="index" style="display: inline-block;">
              <a v-if="item.content_type.indexOf('image') !== -1" :href="item.url" target="_blank"><i :title="item.filename" class="el-icon-picture" style="font-size: 16px;color: #1e6abc" />
              </a>
              <a v-else :href="item.url" target="_blank"><i class="el-icon-files" :title="item.filename" style="font-size: 16px;color: red" /></a>
            </div>
          </div>

        </template>
      </el-table-column>
      <!--      <el-table-column align="center" width="100" prop="processed" label="已经处理" sortable="custom">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tooltip class="item" effect="dark" content="标记已读" placement="bottom-start">-->
      <!--            <el-switch v-model="scope.row.readed" @change="handleModify(scope.row)"></el-switch>-->
      <!--          </el-tooltip>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <!--      <el-table-column align="center" width="100" prop="mail_date" label="时间" sortable="custom"></el-table-column>-->
      <el-table-column align="center" label="操作" width="180" class="mobile-hidden">
        <template slot-scope="scope">
          <span><i class="el-icon-time" />{{ scope.row.mail_date }}</span>
        </template>
      </el-table-column>

    </el-table>
    <crmsendmail
      :mailbox_data="currentrow"
      :is-visible="drawer"
      :new-mail-dialog-show="newMailDialogShow"
      @close="drawer=false;"
      @closeMailDialog="newMailDialogShow=false;"
    />
    <el-pagination
      v-if="data.length"
      background
      class="mt-pagination"
      :current-page="page"
      :page-sizes="[10,20,50,100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />

    <el-dialog
      append-to-body
      :title="title"
      :width="width"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="temp" label-position="left" label-width="120px">

        <el-form-item v-if="action !== 'delete'" label="稍后">
          <el-checkbox v-model="temp.later">是否稍后处理</el-checkbox>
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="处理人">
          <el-select v-model="temp.processor_id" placeholder="处理人" class="head" filterable clearable>
            <el-option label="不指定" value="" />
            <el-option
              v-for="(user, index) in users"
              :key="user.id"
              :label="user.username"
              :value="index"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button :type="action !== 'delete'?'primary':'danger'" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <crmeditcustomer
      :customer_row="edit_customer_temp"
      doaction="edit"
      :is-visible="editCustomerVisible"
      @close="editCustomerVisible=false"
    />
    <el-drawer
      append-to-body
      :wrapper-closable="false"
      title="客户信息"
      :width="drawerWidth"
      :visible.sync="customerInfoCardDialogVisible"
    >
      <crmcustomerinfocard :customer_id="current_customer_id" />
    </el-drawer>

    <!-- 添加邮箱账号对话框 -->
    <el-dialog
      title="添加邮箱账号"
      :visible.sync="addMailServerDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form ref="addMailServerForm" :model="addMailServerForm" label-width="120px">
        <el-form-item label="邮箱平台" prop="platform">
          <el-select v-model="addMailServerForm.platform" placeholder="请选择邮箱平台" @change="handlePlatformChange">
            <el-option
              v-for="item in platforms"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="邮箱账号" prop="username" required>
          <el-input v-model="addMailServerForm.username" placeholder="请输入邮箱账号" />
        </el-form-item>

        <el-form-item label="邮箱密码" prop="password" required>
          <el-input v-model="addMailServerForm.password" type="password" placeholder="请输入邮箱密码或应用专用密码" show-password />
        </el-form-item>

        <el-form-item label="服务类型" prop="server_type">
          <el-select v-model="addMailServerForm.server_type" placeholder="请选择服务类型">
            <el-option
              v-for="item in serverTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="IMAP服务器" prop="server">
          <el-input v-model="addMailServerForm.server" placeholder="如: imap.gmail.com" />
        </el-form-item>

        <el-form-item label="IMAP端口" prop="port">
          <el-input v-model="addMailServerForm.port" placeholder="如: 993" />
        </el-form-item>

        <el-form-item label="SMTP服务器" prop="smtp_server">
          <el-input v-model="addMailServerForm.smtp_server" placeholder="如: smtp.gmail.com" />
        </el-form-item>

        <el-form-item label="SMTP端口" prop="smtp_port">
          <el-input v-model="addMailServerForm.smtp_port" placeholder="如: 465" />
        </el-form-item>

        <el-form-item label="日发送限制" prop="daily_limit">
          <el-input-number v-model="addMailServerForm.daily_limit" :min="1" :max="10000" />
        </el-form-item>

        <el-form-item label="小时发送限制" prop="hourly_limit">
          <el-input-number v-model="addMailServerForm.hourly_limit" :min="1" :max="1000" />
        </el-form-item>

        <el-form-item label="允许发送邮件" prop="sendable">
          <el-switch v-model="addMailServerForm.sendable" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addMailServerDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="addMailServerLoading" @click="handleAddMailServer">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Get, Post, Put, Delete, GetBody, GetMailServerList } from '@/api/crm/crmmailbox'
import { Post as PostMailServer } from '@/api/crm/crmmailserverconfig'
import qs from 'qs'
import Tinymce from '@/components/Tinymce'
import Crmsendmail from './elements/crmsendmail'
import Crmeditcustomer from './elements/crmeditcustomer'
import Crmcustomerinfocard from './elements/crmcustomerinfocard'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Crmmailbox',
  components: { Crmcustomerinfocard, Crmeditcustomer, Crmsendmail, Tinymce },
  data() {
    return {
      drawerWidth: '50%', // 默认宽度
      customerInfoCardDialogVisible: false,
      current_customer_id: '',
      iframeSrc: '',
      sendMailVisible: false,
      mail_to: '',
      mail_receiver: '',
      emailbox_id: '',
      pre_subject: '',
      pre_body: '',
      replayConfigDialogVisible: false,
      newMailDialogShow: false,
      notCustomerDialogVisible: false,
      replatemplateloading: false,
      orderinfoVisible: false,
      orderinfokeyword: '',
      drawer: false,
      data: [],
      listLoading: false,
      kwInput: '',
      processed: '',
      readed: '',
      later: false,
      processor_id: '',
      order_by: 'create_at',
      order_desc: 1,
      // 邮箱选择相关
      isManager: false,
      mailServerList: [],
      selectedMailServerId: null,
      mailServerLoading: false,
      // 添加邮箱账号对话框相关
      addMailServerDialogVisible: false,
      addMailServerForm: {
        platform: 'Gmail',
        username: '',
        password: '',
        server_type: 'IMAP',
        server: '',
        port: '',
        smtp_server: '',
        smtp_port: 465,
        daily_limit: 500,
        hourly_limit: 50,
        sendable: true,
        enable: true
      },
      addMailServerLoading: false,
      platforms: [
        { label: 'Gmail', value: 'Gmail' },
        { label: 'Outlook', value: 'Outlook' },
        { label: 'QQ邮箱', value: 'QQ' },
        { label: '163邮箱', value: '163' },
        { label: '腾讯企业邮箱', value: 'TencentExmail' },
        { label: '阿里企业邮箱', value: 'AliExmail' },
        { label: '其他', value: 'Other' }
      ],
      serverTypes: [
        { label: 'IMAP', value: 'IMAP' },
        { label: 'POP3', value: 'POP3' },
        { label: 'SMTP', value: 'SMTP' }
      ],
      // pagination
      pagesize: 20,
      page: 1,
      total: 0,
      mailbody_src: '',
      currentrow: {
        subject: '',
        body: '',
        mail_from: '',
        mail_to: '',
        readed: false,
        process_label: '',
        mail_receiver: ''
      },
      action: null,
      dialogVisible: false,
      title: '',
      temp: {
        later: true,
        processor_id: '',
        id: ''
      },
      width: '',
      projects: [],
      innerDialogVisible: false,
      replayDialogVisible: false,
      replaytitle: '回复邮件',
      chooseReplayTemplate: '',
      replayTemplateAll: true,
      replaytemplateoptions: [],
      replaytemplatebody: '',
      edit_customer_temp: '',
      editCustomerVisible: false,
      replyemail: {
        mailbox_id: '',
        body: '',
        subject: '',
        send_account: '',
        receiver_email: ''
      },
      order_datas: [],
      order_total: 0,
      orderloading: false,
      paypalcase_data: [],
      email_accounts: [],
      users: []
    }
  },
  computed: {
    // 目录名称
    k: function() {
      return this.$route.query.k
    }
  },
  watch: {
    webVisible(v) {
      this.dialogVisible = v
      if (v) {
        this.getList()
      }
    }
  },
  mounted() {
    this.adjustDrawerWidth()
    // 监听屏幕大小变化
    window.addEventListener('resize', this.adjustDrawerWidth)
  },
  async created() {
    if (this.k) {
      this.kwInput = this.k
    }
    // this.getReplyTemplate({ 'kw': '', 'pagesize': 20 })
    // 先获取邮箱列表，再获取邮件
    await this.getMailServerList()
    this.handleSearch()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.adjustDrawerWidth)
  },
  methods: {
    adjustDrawerWidth() {
      if (window.innerWidth <= 768) {
        this.drawerWidth = '100%' // 手机屏幕
      } else {
        this.drawerWidth = '60%' // 较大屏幕
      }
    },
    handleShowCustomerCard(crmcustomer_id) {
      this.current_customer_id = crmcustomer_id
      this.customerInfoCardDialogVisible = true
    },
    handleEditMail(label, value, row) {
      // 参数校验（可选，根据需要）
      if (!label || !row || row.id === undefined) {
        console.error('Invalid parameters for handleEditMail')
        return
      }

      Put(row.id, {
        [label]: value
      }).then((response) => {
        row[label] = value
      })
    },
    // 获取邮箱服务器列表
    async getMailServerList() {
      try {
        this.mailServerLoading = true
        const response = await GetMailServerList()
        if (response.success) {
          const { is_manager, mailservers } = response.data
          this.isManager = is_manager
          this.mailServerList = mailservers

          // 如果是管理员且有邮箱列表，默认选择第一个
          if (is_manager && mailservers.length > 0) {
            this.selectedMailServerId = mailservers[0].id
          }
        }
      } catch (error) {
        console.error('获取邮箱列表失败:', error)
        this.$message.error('获取邮箱列表失败')
      } finally {
        this.mailServerLoading = false
      }
    },
    // 邮箱切换事件
    onMailServerChange(mailServerId) {
      console.log('切换邮箱:', mailServerId)
      this.selectedMailServerId = mailServerId
      // 重新获取邮件列表
      this.getList()
    },
    // 显示添加邮箱账号对话框
    showAddMailServerDialog() {
      this.addMailServerDialogVisible = true
      // 重置表单
      this.resetAddMailServerForm()
    },
    // 重置添加邮箱表单
    resetAddMailServerForm() {
      this.addMailServerForm = {
        platform: 'Gmail',
        username: '',
        password: '',
        server_type: 'IMAP',
        server: 'imap.gmail.com',
        port: '993',
        smtp_server: 'smtp.gmail.com',
        smtp_port: 465,
        daily_limit: 500,
        hourly_limit: 50,
        sendable: true,
        enable: true
      }
    },
    // 处理邮箱平台切换
    handlePlatformChange(platform) {
      // 根据平台自动填充服务器信息
      const platformConfigs = {
        'Gmail': {
          server: 'imap.gmail.com',
          port: '993',
          smtp_server: 'smtp.gmail.com',
          smtp_port: 465
        },
        'Outlook': {
          server: 'outlook.office365.com',
          port: '993',
          smtp_server: 'smtp.office365.com',
          smtp_port: 587
        },
        'QQ': {
          server: 'imap.qq.com',
          port: '993',
          smtp_server: 'smtp.qq.com',
          smtp_port: 465
        },
        '163': {
          server: 'imap.163.com',
          port: '993',
          smtp_server: 'smtp.163.com',
          smtp_port: 465
        },
        'TencentExmail': {
          server: 'imap.exmail.qq.com',
          port: '993',
          smtp_server: 'smtp.exmail.qq.com',
          smtp_port: 465
        },
        'AliExmail': {
          server: 'imap.mxhichina.com',
          port: '993',
          smtp_server: 'smtp.mxhichina.com',
          smtp_port: 465
        },
        'Other': {
          server: '',
          port: '993',
          smtp_server: '',
          smtp_port: 465
        }
      }

      const config = platformConfigs[platform]
      if (config) {
        Object.assign(this.addMailServerForm, config)
      }
    },
    // 处理添加邮箱账号
    async handleAddMailServer() {
      // 验证表单
      if (!this.addMailServerForm.username || !this.addMailServerForm.password) {
        this.$message.error('请填写邮箱账号和密码')
        return
      }

      try {
        this.addMailServerLoading = true

        // 提交数据
        const response = await PostMailServer(this.addMailServerForm)

        if (response.success) {
          this.$message.success('邮箱账号添加成功')
          this.addMailServerDialogVisible = false

          // 刷新邮箱列表
          await this.getMailServerList()

          // 如果刚添加的是第一个邮箱，自动选中并刷新邮件列表
          if (this.mailServerList.length === 1) {
            this.selectedMailServerId = this.mailServerList[0].id
            this.getList()
          }
        } else {
          this.$message.error(response.msg || '添加失败')
        }
      } catch (error) {
        console.error('添加邮箱账号失败:', error)
        this.$message.error('添加邮箱账号失败，请检查配置信息')
      } finally {
        this.addMailServerLoading = false
      }
    },
    fetchEmailBody() {
      GetBody(qs.stringify({
        mail_token: this.currentrow.mail_token
      }))
        .then(response => {
          // 确保response是字符串形式的HTML内容
          const htmlContent = response // 或者如果response是一个对象，你可能需要 response.data 或类似的属性

          // 添加缺失的DOCTYPE声明、<html>、<body>标签
          const fullHtmlContent = `<!DOCTYPE html><html><body>${htmlContent}</body></html>`

          // 创建一个Blob对象，类型为"text/html"
          const blob = new Blob([fullHtmlContent], { type: 'text/html' })
          // 创建一个指向该Blob的URL
          this.iframeSrc = URL.createObjectURL(blob)
        }).catch(err => {
          console.log(err)
        })
    },
    handleSendMail() {
      // Get(this.replyemail).then(response => {
      //   this.maindialogVisible = false
      //   this.notify('发送成功')
      // })
      console.log('hahha')
    },
    handleCloseSendMail(arg) {
      this.sendMailVisible = false
      this.delData(arg)
    },
    handleChangeTemplate(id) {
      console.log(id, 1111)
      this.replaytemplateoptions.forEach(item => {
        if (id === this.chooseReplayTemplate) {
          this.replaytemplatebody = item.body
        }
      })
    },
    delData(id) {
      this.data.forEach((v, i) => {
        if (id === v.id) {
          this.data.splice(i, 1)
        }
      })
    },
    GetPaypalCaseInfo(transaction_id) {
      console.log('test')
    },
    handleReplayEmail(row) {
      this.replyemail.receiver_email = row.mail_from
      this.replyemail.emailbox_id = row.id
      this.replyemail.subject = 'Re:' + row.subject
      this.replyemail.body = "&nbsp;&nbsp;<br>---Original--=<br><div style='display:block'>" + row.body + '</div>'
      // test
      this.pre_subject = this.replyemail.subject
      this.pre_body = this.replyemail.body
      this.mail_to = row.mail_from
      this.mail_receiver = row.mail_to
      this.emailbox_id = row.id
      this.sendMailVisible = true
      // this.replayDialogVisible = true
      // this.$nextTick(() => {
      //   if (this.$refs.mt.hasInit) {
      //     this.$refs.mt.setContent(this.replyemail.body)
      //   }
      // })
      // this.GetOrderInfomation(row.mail_from)
      // this.replyemail.send_account = ''
      // this.email_accounts.forEach(item => {
      //   if (row.mail_to === item.account) {
      //     this.replyemail.send_account = item.id
      //   }
      // })
    },
    handleProcessLater(id) {
      if (id === '') {
        return
      }
      Put(id, {
        later: 'true'
      }).then((response) => {
        this.delData(id)
      })
    },
    handleEditCustomer(row) {
      this.edit_customer_temp = row
      this.editCustomerVisible = true
    },
    handleDrawer(row) {
      this.currentrow = row
      this.drawer = true
      this.fetchEmailBody()
    },
    resetTemp() {
      this.temp = {
        later: true,
        processor_id: ''
      }
    },
    getList() {
      this.listLoading = true
      const params = {
        kw: this.kwInput,
        processed: this.processed,
        later: this.later,
        readed: this.readed,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }

      // 如果是管理员且选择了特定邮箱，则传递mailserver_id参数
      if (this.isManager && this.selectedMailServerId) {
        params.mailserver_id = this.selectedMailServerId
      }

      Get(null, qs.stringify(params))
        .then(response => {
          this.scrollTop()
          this.data = response.data.data
          this.data = response.data.data.map(m => {
            this.$set(m, 'active', false)
            return m
          })
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleModify(row) {
      Put(row.id, {
        readed: row.readed
      }).then((response) => {
        this.notify('更新成功')
      })
    },
    handleAction(action, row) {
      this.action = action
      switch (action) {
        case 'create':
          this.width = '50%'
          this.title = row
          this.resetTemp()
          this.innerDialogVisible = true
          break
        case 'delete':
          this.width = '30%'
          this.title = `确认要删除${row.domain}?`
          this.temp = Object.assign({}, row)
          this.innerDialogVisible = true
          break
        case 'edit':
          this.width = '50%'
          this.title = `修改邮件:${row.subject} from ${row.mail_from}`
          this.temp.id = row.id
          this.temp.processor_id = row.processor_id
          this.temp.later = true
          this.innerDialogVisible = true
          break
      }
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'create':
          if (_data.project_id === '') {
            alert('必须选择项目')
            return
          }
          if (!_data.account.length) {
            alert('必须填写邮箱账号')
            return
          }
          if (!_data.password.length) {
            alert('必须填写密码')
            return
          }
          if (!_data.smtp_host.length) {
            alert('必须填写smtp_host')
            return
          }
          Post(_data
          ).then(response => {
            this.innerDialogVisible = false
            this.getList()
            this.$emit('reload')
            this.notify('添加成功')
          })
          break
        case
          'delete'
          :
          Delete(_data.id).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case
          'edit'
          :
          Put(_data.id, {
            processor_id: _data.processor_id,
            later: _data.later
          }).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.notify('更新成功')
          })
          break
      }
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeWebDialog', false)
    }
  }
}
</script>
<style>
.unread {
    font-weight: 700;
  }
.mt-row-btns {
  float: right;
  margin-right: 10px;
  z-index: 10000;
}
</style>
<style scoped>
  .mt-dialog >>> .el-dialog {
    margin-top: 5px !important;
    top: 10px;
    /*margin: 168px auto !important;*/
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 100px;
  }
  .el-container >>> .pointer {
    cursor: pointer;
    color: #409EFF;
  }

  .el-container >>> a:visited {
    color: purple;
  }

  .el-container >>> a:link {
    color: #409EFF;
  }

  .el-container >>> a:active {
    color: red;
  }
  .app-container >>> a:hover {
    color: red;
    text-decoration: underline;
  }

  /* 针对屏幕宽度小于或等于768px的设备 */
@media (max-width: 768px) {
  .top > div {
    /* 将顶部控制元素堆叠而不是并排显示 */
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .mobile-hidden {
    display: none;
  }
  .el-table_1_column_5 {
    display: none;
  }
  /* 可能需要调整表格其他列的宽度或隐藏，根据实际情况调整 */
}

</style>
